<template>
  <ToolbarButton
    type="dropdown"
    icon="i-tabler-file-orientation"
    title="页面方向"
    dropdown-icon="i-ri-arrow-down-s-fill"
    popover-width="200px"
    popover-placement="bottom-start"
    :large-icon="props.largeIcon"
    :hide-text="props.hideText"
    @main-click="togglePageOrientation"
  >
    <template #dropdown>
      <div class="page-orientation-dropdown">
        <!-- 页面方向选项 -->
        <div class="page-orientation-options">
          <div
            v-for="option in orientationOptions"
            :key="option.value"
            class="page-orientation-option"
            :class="{ active: currentOrientation === option.value }"
            @click="setPageOrientation(option.value)"
          >
            <!-- 选中标记 -->
            <div class="page-orientation-check">
              <i
                v-if="currentOrientation === option.value"
                class="i-ri-check-line"
              ></i>
            </div>
            <!-- 选项信息 -->
            <div class="page-orientation-info">
              <div class="orientation-label">{{ option.label }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </ToolbarButton>
</template>

<script setup lang="ts">
import { inject, computed, type Ref } from "vue";
import type { PageOption } from "../../../../types";
import ToolbarButton from "../../../button/index.vue";
import { closeAllToolbarPopups } from "../../../button/src/utils/toolbarPopupManager";

defineOptions({
  name: "PageOrientation",
});

const props = withDefaults(
  defineProps<{
    largeIcon?: boolean;
    hideText?: boolean;
  }>(),
  {
    largeIcon: false,
    hideText: true,
  }
);

// 注入页面配置
const pageOptions = inject<Ref<PageOption>>("page");

// 页面方向选项
type OrientationOption = {
  label: string;
  value: "portrait" | "landscape";
};

const orientationOptions: OrientationOption[] = [
  { label: "纵向", value: "portrait" },
  { label: "横向", value: "landscape" },
];

// 当前选中的页面方向
const currentOrientation = computed(() => {
  return pageOptions?.value?.orientation || "portrait";
});

// 切换页面方向（主按钮点击）
const togglePageOrientation = () => {};

// 设置页面方向
const setPageOrientation = (orientation: "portrait" | "landscape") => {
  if (!pageOptions?.value) return;
  
  // 直接更新方向，无需弹窗确认
  pageOptions.value.orientation = orientation;
  
  // 关闭 dropdown 弹窗
  closeAllToolbarPopups(undefined, undefined, ["select", "popover"]);
};
</script>

<style lang="scss" scoped>
.page-orientation-dropdown {
  padding: 8px;
}

.page-orientation-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.page-orientation-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  background-color: transparent;

  &:hover {
    background-color: transparent;
  }

  &.active {
    background-color: transparent;
  }
}

.page-orientation-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;

  .i-ri-check-line {
    font-size: 16px;
    color: var(--editor-primary-color, #0D61F2);
    transition: color 0.2s ease;
  }
}

.page-orientation-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.orientation-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--editor-text-color);
  line-height: 1.5;
}

/* 暗色主题适配 */
[theme-mode="dark"] {
  .page-orientation-option {
    background-color: transparent;

    &:hover {
      background-color: transparent;
    }

    &.active {
      background-color: transparent;
    }
  }
}
</style>

